<template>
  <div class="itemBlog">
    <el-card :body-style="{ padding: '0px' }" class="container">
      <a href="#" @click="gotoOneBlog">
        <img :src="blogItem.img"  width="100%">
      </a>
      <div class="padding">
        <div class="detail">
          <div class="time">{{blogItem.time}}</div>
          <div class="category">
            <el-link type="danger" :underline="false" @click="gotoBlogList">{{ blogItem.category}}</el-link>
          </div>
        </div>
        <el-link :underline="false">
          <h3 class=" animated bounce" @click="gotoOneBlog">
            {{blogItem.title}}
          </h3>
        </el-link><br/>
        <el-link :underline="false" style="font-size: 14px">
          {{blogItem.contail}}
        </el-link>
        <div class="footer" >
          <span style="margin-top: auto;margin-bottom: auto">点击数：{{blogItem.likeCount}}</span>
          <el-button style="border: 2px solid #eaa9bc" @click="gotoOneBlog">详情</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "myIndexOneblog",
  props: {
    blogItem: {
      // img,time,category,title,contail
      type: Object,
      default() {
        return {}
      }
    }
  },
  created() {
  },
  methods: {
    gotoOneBlog(){
      this.$router.push({ name: 'oneBlog', params: { blogId: this.blogItem.blogId }});
    },
    gotoBlogList(){
      this.$router.push({ path: "/blogList", query: { categoryId: this.blogItem.categoryId}});
    }
  }
}
</script>

<style scoped>

.itemBlog{
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.container{
  display: flex;
  flex-direction: column;
}
.detail{
  display: flex;
  flex-direction: row;
  font-size: 13px;
}
.padding{
  margin: 10px 10px 10px 10px;
}
.time{
  margin-top: 2px;
  font-size: 14px;
}
.category{
  margin-left: 10px;
}
.footer{
  display: flex;
  justify-content: space-between;
  margin: 0px 15% 30px 15%;
}
</style>
